<!--
 * @Author: wangming
 * @Date: 2021-04-01 14:02:25
 * @LastEditors: wangming
 * @LastEditTime: 2022-06-22 16:12:53
 * @Description: file content
-->
<template>
  <div>
    <el-form-item label="标签类型">
      <el-radio-group
        v-model="value.__config.tabtype"
        class="mb10"
        style="width: 100%"
      >
        <el-radio-button label="">基础</el-radio-button>
        <el-radio-button label="card">选项卡</el-radio-button>
        <el-radio-button label="border-card">卡片话</el-radio-button>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="选项卡所在位置">
      <el-radio-group
        v-model="value.__config.tabPosition"
        class="mb10"
        style="width: 100%"
      >
        <el-radio-button label="top">top</el-radio-button>
        <el-radio-button label="right">right</el-radio-button>
        <el-radio-button label="bottom">bottom</el-radio-button>
        <el-radio-button label="left">left</el-radio-button>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="关闭懒加载" class="tr">
      <el-switch v-model="value.__config.closelazy"></el-switch>
    </el-form-item>
    <el-form-item label="标签页缓存" class="tr">
      <el-switch v-model="value.__config.caches" />
    </el-form-item>
    <div class="ks-row-middle">
      <div class="dib mr10">标签管理</div>
      <i
        class="el-icon-circle-plus-outline iconcolor f20 poi"
        @click="addTag"
      ></i>
    </div>
    <draggable
      class="mt10"
      handle=".mover"
      :animation="200"
      :list="value.children"
      :delay="20"
      chosen-class="drawing-chosen"
      drag-class="drawing-drag"
    >
      <div
        class="ks-row-middle codebg lh1 mb5 iconcolor"
        v-for="(i, index) in value.children"
        :key="index"
      >
        <div class="ks-col">
          <el-tag size="mini">
            {{ i.label }}
          </el-tag>
        </div>
        <GlobalizationConfigWord
          class="mr10"
          @setLangCode="(label_i18n) => setLangCode(label_i18n, i, index)"
          :localism="i.label_i18n"
        ></GlobalizationConfigWord>
        <el-tooltip
          v-if="value.defaultValue == i.value"
          content="默认展开页面"
          placement="top-end"
        >
          <span class="el-icon-star-on mr10 f18"></span>
        </el-tooltip>
        <el-popconfirm
          v-else
          title="设为默认展开标签页吗？"
          placement="top-end"
          @confirm="value.defaultValue = i.value"
        >
          <span class="el-icon-star-off mr10 poi" slot="reference"></span>
        </el-popconfirm>

        <span class="iconfont iconbianji mr10 poi" @click="edit(i)"></span>
        <el-popconfirm
          title="确定删除该标签？"
          placement="top-end"
          @confirm="value.children.splice(index, 1)"
        >
          <i class="iconfont iconicon_shanchu poi mr10" slot="reference" />
        </el-popconfirm>
        <i class="el-icon-rank f16 mover"></i>
      </div>
    </draggable>
  </div>
</template>

<script>
import draggable from "vuedraggable";
import basicmixins from "../basicmixins";
import Module from "./addModule";
export default {
  components: { draggable },
  mixins: [basicmixins],
  data() {
    return {};
  },
  methods: {
    setLangCode(label_i18n, value, index) {
      this.$set(this.value.children, index, { ...value, label_i18n });
    },
    addTag() {
      let index = 1;
      let maxArg = this.value.children.map((i) => i.value);
      if (maxArg.length > 0) {
        index = Math.max(...maxArg) + 1;
      }
      this.value.children.push({
        label: "标签页" + index,
        value: index + "",
        label_i18n: "",
        children: [],
        hide: false,
        RuleConditions: [],
      });
    },
    edit(i) {
      Module.editModule(i).then((form) => {
        Object.assign(i, form);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.codebg {
  border: 1px solid #f1f1f1;
  padding: 5px 10px;
  &:hover {
    background-color: #f3f9ff;
  }
}
</style>
